<template>
    <div class="dingdan-box">
        <el-row>
            <el-col :span="24" class="dingdan-box1" style="border-bottom: 2px solid #E4E4E4">
                <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px">
                    <div style="width: 10px;height: 25px;background-color: #1ABC9C;float: left;margin-top: 13px;"></div>
                    <div style="margin-left: 20px">会话问题</div>
                </div>
                <div style="float: right;">
                    <el-button size="mini" style="background-color: #FFFFFF" class="small-button" plain @click="returnPage"><i class="el-icon-arrow-left"></i>返回</el-button>
                    <el-button size="mini" style="background-color: #FFFFFF" class="small-button" @click="shuaxin"><i class="el-icon-refresh-right"></i>刷新</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div style="margin-top: 20px;padding: 0px 20px 0px 20px">
                    <el-descriptions direction="vertical" :column="4" border>
                        <el-descriptions-item label="历史接待次数" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Jilu.LishiJiedaiCishu}}</el-descriptions-item>
                        <el-descriptions-item label="历史接待人数" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Jilu.LishiJiedaiRenshu}}</el-descriptions-item>
                        <el-descriptions-item label="今日接待次数" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Jilu.JinriCishu}}</el-descriptions-item>
                        <el-descriptions-item label="今日接待人数" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">{{Jilu.JinriRenshu}}</el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;padding: 0px 20px 0px 20px">
            <el-col :span="10">
                <template>
                    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <el-tab-pane label="今天" name="first">
                            <ul v-for="(item,index) in LetYouDown.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="index">
                                <li style="position: relative;border: 1px solid #F2F2F2;">
                                    <button style="width: 100%;border: none;height: 70px;cursor: pointer" :class="{active:index===isActive}" @click="mouseClickk(index)">
                                        <img :src="item.toimg" width="50px" height="50px" style="float: left;margin:0px 20px 0px 10px">
                                        <div style="float: left;font:18px 微软雅黑;">{{item.toname}}</div>
                                        <div style="position: absolute;top: 40px;left: 80px;color: #CCCCCC">开始时间：{{item.sendTime}}</div>
                                        <div style="position: absolute;top: 40px;left: 280px;color: #CCCCCC">结束时间：{{item.endTime}}</div>
                                    </button>
                                </li>
                            </ul>
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[1,5,10]"
                                    :page-size="pagesize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="LetYouDown.length">
                            </el-pagination>
                        </el-tab-pane>
                        <el-tab-pane label="最近一周" name="second">
                            <ul v-for="(item,index) in LetYouDown.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="index">
                                <li style="position: relative;border: 1px solid #F2F2F2;">
                                    <button style="width: 100%;border: none;height: 70px;cursor: pointer" :class="{active:index===isActive}" @click="mouseClickk(index)">
                                        <img :src="item.toimg" width="50px" height="50px" style="float: left;margin:0px 20px 0px 10px">
                                        <div style="float: left;font:18px 微软雅黑;">{{item.toname}}</div>
                                        <div style="position: absolute;top: 40px;left: 80px;color: #CCCCCC">开始时间：{{item.sendTime}}</div>
                                        <div style="position: absolute;top: 40px;left: 280px;color: #CCCCCC">结束时间：{{item.endTime}}</div>
                                    </button>
                                </li>
                            </ul>
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[1,5,10]"
                                    :page-size="pagesize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="LetYouDown.length">
                            </el-pagination>
                        </el-tab-pane>
                        <el-tab-pane label="最近一月" name="third">
                            <ul v-for="(item,index) in LetYouDown.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="index">
                                <li style="position: relative;border: 1px solid #F2F2F2;">
                                    <button style="width: 100%;border: none;height: 70px;cursor: pointer" :class="{active:index===isActive}" @click="mouseClickk(index)">
                                        <img :src="item.toimg" width="50px" height="50px" style="float: left;margin:0px 20px 0px 10px">
                                        <div style="float: left;font:18px 微软雅黑;">{{item.toname}}</div>
                                        <div style="position: absolute;top: 40px;left: 80px;color: #CCCCCC">开始时间：{{item.sendTime}}</div>
                                        <div style="position: absolute;top: 40px;left: 280px;color: #CCCCCC">结束时间：{{item.endTime}}</div>
                                    </button>
                                </li>
                            </ul>
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[1,5,10]"
                                    :page-size="pagesize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="LetYouDown.length">
                            </el-pagination>
                        </el-tab-pane>
                        <el-tab-pane label="全部" name="fourth">
                            <ul v-for="(item,index) in LetYouDown.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="index">
                                <li style="position: relative;border: 1px solid #F2F2F2;">
                                    <button style="width: 100%;border: none;height: 70px;cursor: pointer" :class="{active:index===isActive}" @click="mouseClickk(index)">
                                        <img :src="item.toimg" width="50px" height="50px" style="float: left;margin:0px 20px 0px 10px">
                                        <div style="float: left;font:18px 微软雅黑;">{{item.toname}}</div>
                                        <div style="position: absolute;top: 40px;left: 80px;color: #CCCCCC">开始时间：{{item.sendTime}}</div>
                                        <div style="position: absolute;top: 40px;left: 280px;color: #CCCCCC">结束时间：{{item.endTime}}</div>
                                    </button>
                                </li>
                            </ul>
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[1,5,10]"
                                    :page-size="pagesize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="LetYouDown.length">
                            </el-pagination>
                        </el-tab-pane>
                        <el-tab-pane label="客服" name="five">
                            <ul v-for="(item,index) in AllKefu" :key="index">
                                <li style="position: relative;border: 1px solid #F2F2F2;">
                                    <button style="width: 100%;border: none;height: 70px;cursor: pointer" @click="XianshiKefuHuiHua(item,index)" :class="{active:index===isActive}">
                                        <img :src="item.toimg" width="50px" height="50px" style="float: left;margin:0px 20px 0px 10px">
                                        <div style="float: left;font:18px 微软雅黑;padding-top: 15px">{{item.toname}}</div>
                                    </button>
                                </li>
                            </ul>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </el-col>
            <el-col :span="14">
                <div class="main" v-if="Dangqianhuihua">
                    <div class="box">
                        <div class="title" style="padding-bottom: 8px;border-bottom: 1px solid #E7E7E7">
                            <img src="" alt class="logo" />
                            <span class="title-hn">{{DangqianKefu.name}}客服</span>
                        </div>
                        <div id="content" class="content" style="padding-top: 10px;border-left: 1px solid #E1E1E1;">
                            <div v-for="(item,index) in info" :key="index">
                                <div class="info_r info_default" v-if="item.type == 'leftinfo'">
                                    <img :src="DangqianKefu.img" class="circle circle_r">
                                    <div class="con_r con_text">
                                        <div>{{item.content}}</div>
                                        <div v-for="(item2,index) in item.question" :key="index">
                                            <div class="con_que" @click="clickRobot(item2.content,item2.id)">
                                                <div class="czkj-question-msg">
                                                    {{item2.index}}
                                                    {{item2.content}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="time_r">{{item.time}}</div>
                                </div>
                                <div class="info_l" v-if="item.type == 'rightinfo'">
                                    <div class="con_rr con_text" style="margin-right: 10px">
                                        <span class="con_l">{{item.content}}</span>
                                    </div>
                                    <img :src="$store.state.userXinxi.avatar" class="circle circle_l">
                                    <div class="time_l">{{item.time}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="setproblem">
                              <textarea
                                      placeholder="请输入您的问题..."
                                      style="height: 68px;width: 100%;resize:none;padding-right:80px;outline: none;border-color:#ccc;border-radius:5px;"
                                      id="text"
                                      v-model="customerText"
                                      @keyup.enter="sentMsg()"
                              ></textarea>
                            <button @click="sentMsg()" class="setproblems">
                                <span style="vertical-align: 4px;">发 送</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div content="main" v-if="LiaotianJilu">
                    <div class="box">
                        <div class="title" style="padding-bottom: 8px;border-bottom: 1px solid #E7E7E7">
                            <span class="title-hn">聊天记录</span>
                        </div>
                        <div class="content" style="padding-top: 10px;border-left: 1px solid #E1E1E1;">
                            <div v-for="(item,index) in Sharks" :key="index">
                                <div class="info_r info_default" v-if="item.type == 'leftinfo'">
                                    <img :src="item.img" class="circle circle_r">
                                    <div class="con_r con_text">
                                        <div>{{item.content}}</div>
                                        <div v-for="(item2,index) in item.shuzu" :key="index">
                                            <div class="con_que" @click="clickRobot(item2.content,item2.id)">
                                                <div class="czkj-question-msg">
                                                    {{item2.index}}
                                                    {{item2.content}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="time_r">{{item.time}}</div>
                                </div>
                                <div class="info_l" v-if="item.type == 'rightinfo'">
                                    <div class="con_rr con_text" style="margin-right: 10px">
                                        <span class="con_l">{{item.content}}</span>
                                    </div>
                                    <img :src="item.img" class="circle circle_l">
                                    <div class="time_l">{{item.time}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        //哪个页面要刷新就引入这个
        inject:['reload'],
        name: "onlineCustomer",
        components: {},
        computed: {},
        data(){
            return{
                currentPage: 1,//当前是哪一页
                pagesize: 5,//每页多少条
                //接待数据
                Jilu:{
                    LishiJiedaiCishu:"",
                    LishiJiedaiRenshu:"",
                    JinriCishu:"",
                    JinriRenshu:"",
                },
                activeName: 'five',//选择第一个标签
                customerText: "",
                info: [
                    {
                        type: "leftinfo",
                        time: this.getTodayTime(),
                        name: "robot",
                        content:
                            "您好，请问有什么能帮到您的吗？",
                        question: [],
                    },
                ],
                timer: null,
                robotQuestion: [],//回答问题
                robotAnswer: [],//提问问题user
                AllKefu:[],//后端查询的所有客服
                DangqianKefu:{
                    name:'',
                    img:'',
                },
                Dangqianhuihua:false,//控制点击客服的时候不点小优 右边的聊天框不会显示
                isActive: -1,//控制点哪个按钮 哪个按钮就变色
                DuihuaGeshi:[],//存储对话格式的数组
                DangqianKefuId:-9999,//当前客服的Id
                KefuId:-99,//当前会话表对应的id
                LetYouDown:[],//今天 本周 本月
                Sharks:[],//当前点击的客服的聊天信息
                LiaotianJilu:false,//聊天记录是否显示
            }
        },
        created() {
            this.showTimer();
        },
        watch: {},
        methods:{
            handleSizeChange(val) {
                this.pagesize = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            shuaxin(){
                //刷新页面的方法
                this.reload();
            },
            returnPage(){
                //此方法用来返回上一个页面
                if (window.history.length <= 1) {
                    this.$router.push({ path: "/system/storageManagement" });
                    return false;
                } else {
                    this.$router.go(-1);
                }
            },
            async JieDaishuju(){
                const {data:res} = await this.$http.post("/getLishijilu",{
                    "id":''
                })
                this.Jilu.LishiJiedaiCishu = res.lishiJiedaiCishu;
                this.Jilu.LishiJiedaiRenshu = res.lishiJiedaiRenshu;
            },
            async todayJieDai(){
                const {data:res} = await this.$http.post("/todayShuju",{
                    "id":''
                })
                this.Jilu.JinriCishu = res.jinricishu;
                this.Jilu.JinriRenshu =res.jinriRenshu;
            },
            async today(){
                const {data:res} = await this.$http.post("/getTodayLiaotian")
                this.LetYouDown = res;
            },
            async toweek(){
                const {data:res} = await this.$http.post("/getToweekLiaotian")
                this.LetYouDown = res;
            },
            async tomonth(){
                const {data:res} = await this.$http.post("/getTomonthLiaotian")
                this.LetYouDown = res;
            },
            async all(){
                const {data:res} = await this.$http.post("/getAllLiaotian")
                this.LetYouDown = res;
            },
            handleClick(tab, event) {
                if (tab.$options.propsData.label=="今天"){
                    this.Qiehuan(this.KefuId);
                    this.Dangqianhuihua = false;
                    this.LiaotianJilu = false;
                    this.today();
                }else if(tab.$options.propsData.label=="最近一周"){
                    this.Qiehuan(this.KefuId);
                    this.Dangqianhuihua = false;
                    this.LiaotianJilu = false;
                    this.toweek();
                }else if(tab.$options.propsData.label=="最近一月"){
                    this.Qiehuan(this.KefuId);
                    this.Dangqianhuihua = false;
                    this.LiaotianJilu = false;
                    this.tomonth();
                }else if(tab.$options.propsData.label=="全部"){
                    this.Qiehuan(this.KefuId);
                    this.Dangqianhuihua = false;
                    this.LiaotianJilu = false;
                    this.all();
                }else {
                    this.LiaotianJilu = false;
                }
                this.isActive = -1;//控制每次切换标签页的时候都重置一下
            },
            // 用户发送消息
            sentMsg() {
                clearTimeout(this.timer);
                this.showTimer();
                let text = this.customerText.trim();
                this.DuihuaGeshi.push({content:this.customerText.trim(),time:this.getTodayTime(),type:"rightinfo",img:this.$store.state.userXinxi.avatar});
                localStorage.setItem("lastContent",JSON.stringify(this.DuihuaGeshi));
                localStorage.setItem("lastTime",this.getTodayTime());
                if (text != "") {
                    var obj = {
                        type: "rightinfo",
                        time: this.getTodayTime(),
                        content: text,
                    };
                    this.info.push(obj);
                    this.appendRobotMsg(this.customerText);
                    this.customerText = "";
                    this.$nextTick(() => {
                        var contentHeight = document.getElementById("content");
                        contentHeight.scrollTop = contentHeight.scrollHeight;
                    });
                }
            },
            // 机器人回答消息
            appendRobotMsg(text) {
                clearTimeout(this.timer);
                this.showTimer();
                text = text.trim();
                let answerText = "";
                let flag;
                for (let i = 0; i < this.robotAnswer.length; i++) {
                    if (this.robotAnswer[i].content.indexOf(text) != -1) {
                        flag = true;
                        answerText = this.robotAnswer[i].content;
                        break;
                    }
                }
                if (flag) {
                    let obj = {
                        type: "leftinfo",
                        time: this.getTodayTime(),
                        name: "robot",
                        content: answerText,
                        question: [],
                    };
                    this.info.push(obj);
                } else {
                    answerText = "您可能想问：";
                    let obj = {
                        type: "leftinfo",
                        time: this.getTodayTime(),
                        name: "robot",
                        content: answerText,
                        question: this.robotQuestion,
                    };
                    this.DuihuaGeshi.push({content:obj.content,time:this.getTodayTime(),shuzu:obj.question,img:this.DangqianKefu.img,type:"leftinfo"});
                    localStorage.setItem("lastContent",JSON.stringify(this.DuihuaGeshi));
                    localStorage.setItem("lastTime",this.getTodayTime());
                    this.info.push(obj);
                }
                this.$nextTick(() => {
                    var contentHeight = document.getElementById("content");
                    contentHeight.scrollTop = contentHeight.scrollHeight;
                });
            },
            sentMsgById(val, id) {
                clearTimeout(this.timer);
                this.showTimer();
                let robotById = this.robotAnswer.filter((item) => {
                    return item.id == id;
                });
                let obj_l = {
                    type: "leftinfo",
                    time: this.getTodayTime(),
                    name: "robot",
                    content: robotById[0].content,
                    question: [],
                };
                this.DuihuaGeshi.push({content:obj_l.content,time:this.getTodayTime(),type:"leftinfo",img:this.DangqianKefu.img});
                localStorage.setItem("lastContent",JSON.stringify(this.DuihuaGeshi));
                localStorage.setItem("lastTime",this.getTodayTime());
                let obj_r = {
                    type: "rightinfo",
                    time: this.getTodayTime(),
                    name: "robot",
                    content: val,
                    question: [],
                };
                this.info.push(obj_r);
                this.info.push(obj_l);
                this.$nextTick(() => {
                    var contentHeight = document.getElementById("content");
                    contentHeight.scrollTop = contentHeight.scrollHeight;
                });
            },
            // 点击机器人的单个问题
            clickRobot(val, id) {
                this.DuihuaGeshi.push({content:val,time:this.getTodayTime(),type:"rightinfo",img:this.$store.state.userXinxi.avatar});
                localStorage.setItem("lastContent",JSON.stringify(this.DuihuaGeshi));
                localStorage.setItem("lastTime",this.getTodayTime());
                this.sentMsgById(val, id);
            },
            // 结束语
            endMsg() {
                let happyEnding = {
                    type: "leftinfo",
                    time: this.getTodayTime(),
                    content: "长时间不回复...本次接待已结束",
                    question: [],
                };
                this.DuihuaGeshi.push({content:happyEnding.content,time:this.getTodayTime(),img:this.DangqianKefu.img,type:"leftinfo"});
                localStorage.setItem("lastContent",JSON.stringify(this.DuihuaGeshi));
                localStorage.setItem("lastTime",this.getTodayTime());
                this.Qiehuan(this.KefuId);
                this.info.push(happyEnding);
                this.$nextTick(() => {
                    var contentHeight = document.getElementById("content");
                    contentHeight.scrollTop = contentHeight.scrollHeight;
                });
            },
            showTimer() {
                this.timer = setTimeout(this.endMsg, 1000*80);
            },
            getTodayTime() {
                // 获取当前时间
                var day = new Date();
                let seconds = day.getSeconds();
                if (seconds < 10) {
                    seconds = "0" + seconds;
                } else {
                    seconds = seconds;
                }
                let minutes = day.getMinutes();
                if (minutes < 10) {
                    minutes = "0" + minutes;
                } else {
                    minutes = minutes;
                }
                let time =
                    day.getFullYear() +
                    "-" +
                    (day.getMonth() + 1) +
                    "-" +
                    day.getDate() +
                    " " +
                    day.getHours() +
                    ":" +
                    minutes +
                    ":" +
                    seconds;
                return time;
            },
            async getIssue(){
                const {data:res} = await this.$http.post("/getIssue",{
                    "toid":1
                })
                if (res!=''){
                    this.robotQuestion = res;
                }
            },
            async getReply(){
                const {data:res} = await this.$http.post("/getReply",{
                    "toid":1
                })
                if (res!=''){
                    this.robotAnswer = res;
                }
            },
            async getAllKefu(){
                const {data:res} = await this.$http.post("/getAllKefu")
                if (res!=''){
                    this.AllKefu = res;
                }
            },
            XianshiKefuHuiHua(kefu,index){
                //记录对话格式
                this.DangqianKefuId = kefu.toid;
                this.DuihuaGeshi= [{
                    content:"您好，请问有什么能帮到您的吗？",
                    time:this.getTodayTime(),
                    type:"leftinfo",
                    img:kefu.toimg,
                }];
                this.Dangqianhuihua = true;
                this.DangqianKefu.img = kefu.toimg;
                this.DangqianKefu.name = kefu .toname;
                this.isActive = index;
                this.ShouciDuiHua(this.DangqianKefu.img);
            },
            async ShouciDuiHua(val){
                this.DuihuaGeshi= [{
                    content:"您好，请问有什么能帮到您的吗？",
                    time:this.getTodayTime(),
                    img:val,
                    type:"leftinfo"
                }];
              //记录首次接待时间
                var arr = this.DuihuaGeshi;
                arr =JSON.stringify(arr);
                const {data:res} = await this.$http.post("/getFirstLiaotian",{
                    "fromid":this.$store.state.userXinxi.userId,
                    "fromname":this.$store.state.userXinxi.accountname,
                    "toid":this.DangqianKefuId,
                    "toname":this.DangqianKefu.name,
                    "content":arr,
                    "sendTime":this.getTodayTime(),
                    "state":2,
                    "endTime":this.getTodayTime()
                })
                this.KefuId = res;
            },
            async Qiehuan(val){
                const {data:res} = await this.$http.post("/getLastLiaotian",{
                    "content":localStorage.getItem("lastContent"),
                    "id":val,
                    "endTime":localStorage.getItem("lastTime")
                })
            },
            mouseClick(index) {
                //点哪个就变哪个按钮的颜色的方法
                this.isActive = index
                var arr = JSON.parse(this.LetYouDown[index].content);
                this.Sharks = arr;
            },
            mouseClickk(index) {
                //点哪个就变哪个按钮的颜色的方法
                this.isActive = index
                var arr = JSON.parse(this.LetYouDown[index].content);
                this.Sharks = arr;
                this.LiaotianJilu = true;
            },
        },
        watch:{
          KefuId(newVal,oldVal){
              if(oldVal != -99){
                  this.Qiehuan(oldVal);
              }
          }
        },
        created() {
            this.JieDaishuju();
            this.todayJieDai();
            this.getIssue();
            this.getReply();
            this.getAllKefu();
        },
    }
</script>

<style scoped>
    *{
        padding: 0px;
        margin: 0px;
    }
    ul li{
        list-style: none;
    }
    .dingdan-box{
        width: 1360px;
    }
    .dingdan-box1{
        color: #666666;
        line-height: 50px;
        height: 50px;
        background-color: #F3F3F3;
    }
    .box {
        width: 650px;
        /* width: 680px; */
        height: 500px;
        position: relative;
        padding-top: 11px;
    }
    #content {
        height: 440px;
        overflow-y: scroll;
        font-size: 14px;
        width: 100%;
    }
    .content{
        height: 440px;
        overflow-y: scroll;
        font-size: 14px;
        width: 100%;
    }
    .circle {
        display: inline-block;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: #eff1f3;
    }
    .con_text {
        color: #333;
        margin-bottom: 5px;
    }
    .con_que {
        color: #1c88ff;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
    }
    .info_r {
        position: relative;
    }
    .circle_r {
        position: absolute;
        left: 0%;
    }
    .pic_r {
        width: 17px;
        height: 17px;
        margin: 8px;
    }
    .con_r {
        display: inline-block;
        /* max-width: 253px; */
        width: 60%;
        min-height: 35px;
        /* min-height: 20px; */
        background-color: #89D961;
        border-radius: 6px;
        padding: 10px;
        margin-left: 40px;
    }
    .con_rr{
        display: inline-block;
        /* max-width: 253px; */
        width: 50%;
        min-height: 35px;
        /* min-height: 20px; */
        background-color: #89D961;
        border-radius: 6px;
        padding: 10px;
        margin-left: 10px;
    }
    .time_r {
        margin-left: 45px;
        color: #999999;
        font-size: 12px;
    }
    .info_l {
        text-align: right;
        margin-right: 20px;
        color: #ffffff;
        color: #3163C5;
        margin-top: 10px;
    }
    .circle_l {
        vertical-align: -10px;
    }
    .time_l {
        margin-right: 45px;
        color: #999999;
        font-size: 12px;
        margin-top: 5px;
    }
    .con_l {
        display: inline-block;
        width: 310px;
        min-height: 21px;
        border-radius: 6px;
        padding: 0px;
        text-align: left;
        color: black;
        margin-right: 5px;
    }
    .setproblem {
        width: 100%;
        height: 68px;
        background-color: #ffffff;
        position: relative;
        margin-top: 3.75rem;

    }
    .setproblem textarea {
        color: #999999;
        padding: 10px;
        box-sizing: border-box;
    }
    .setproblem button {
        width: 5.875rem;
        height: 2.5rem;
        line-height: 2.5rem;
        background: #3163C5;
        opacity: 1;
        border-radius: 4px;
        font-size: 10px;
        color: #ffffff;
        position: absolute;
        right: 5%;
        top: 30%;
        cursor: pointer;
        border: none;
    }
    .czkj-question-msg {
        float: left;
        font-size: 14px;
        color: #3163C5;
    }
    .active{
        background-color: #C6C5C5;
    }
</style>